<template>
    <section id="pass-free">
        <div class="pass-free">
            <i @click = "returns()"></i>
            免密登录
        </div>

        <ul>
            <li>
                <input type="text" class="phone" placeholder="手机号" />
            </li>
            <li>
                <input type="text" class="vertify" placeholder="验证码" />
                <span>获取验证码</span>
            </li>
        </ul>
        <p class="login">登录</p>
    </section>
</template>

<script>
export default {
    methods:{
        returns(){
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss">
#pass-free {
    .pass-free {
        position: relative;
        line-height: 45px;
        text-align: center;
        font-size: 18px;
        color: gray;
        border-bottom: 1px solid rgb(199, 199, 199);
        i {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 20px;
            height: 20px;
            background: url("../../assets/images/mine/return.png") no-repeat
                center/contain;
        }
    }
    ul {
        padding: 50px 20px 15px;
        li {
            border-bottom: 1px solid rgb(226, 226, 226);
            input {
                padding: 15px 5px;
                border: none;
                outline: none;
                &.phone {
                    width: 100%;
                }
                &.vertify {
                    width: 70%;
                }
                &::-webkit-input-placeholder {
                    color: rgb(196, 196, 196);
                    font-size: 20px;
                    font-weight:500;
                }
            }
            span {
                margin-left: auto;
                font-size: 14px;
                color: grey;
            }
        }
    }
    .login {
        line-height: 50px;
        color: white;
        font-size: 18px;
        text-align: center;
        width: 85%;
        border-radius: 25px;
        margin: 20px auto;
        background-color: #ff5777;
    }
}
</style>